<template>
  <div>
    <!-- app数据管理 用户分析 -->
    <el-form
      :inline="true"
      :model="dataForm">
      <el-form-item>
        <el-date-picker
          v-model="value"
          type="daterange"
          align="left"
          unlink-panels
          :clearable="false"
          :range-separator="$t('datePicker.range')"
          :start-placeholder="$t('datePicker.start')"
          :end-placeholder="$t('datePicker.end')"
          :picker-options="pickerOptions"
        />
      </el-form-item>
      <el-form-item>
        <sn8-select @change="sn8Changed"/>
      </el-form-item>
    </el-form>

    <!--<PanelGroup />-->

    <el-table
      v-loading="loading"
      :data="userData"
      border
      style="width: 100%">
      <el-table-column :label="$t('appData.user.table.title')">
        <el-table-column
          prop="label"
          :label="$t('appData.user.table.type')"/>
        <el-table-column
          prop="value"
          :label="$t('appData.user.table.quantity')"/>
      </el-table-column>
    </el-table>

    <el-row>
      <line-chart
        v-for="(item, index) in userStatisticData"
        :key="index"
        style="margin-top: 20px;background-color: #fff;"
        :index="index"
        :params="dataForm"
        :chart-data="item"
        @onTabChanged="updateUserStatisticData" />
    </el-row>
  </div>

</template>

<script>

import PanelGroup from '../components/PanelGroup'
import LineChart from '../components/LineChart'
import Sn8Select from '@/components/sn8.select'

import commonMixin from '@/mixins/common'

import { mapState } from 'vuex'

export default {
  name: 'Tab',
  mixins: [ commonMixin ],
  components: { PanelGroup, LineChart, Sn8Select },
  data () {
    return {
      dataForm: {
        sn8: '',
        'endTime': '',
        'startTime': '',
        'pageSize': 0,
        'currentPage': 0
      },
      pickerOptions: {
        shortcuts: [{
          text: this.$i18n.t('datePicker.lastOneWeek'),
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: this.$i18n.t('datePicker.lastThreeMonths'),
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value: ''
    }
  },
  computed: mapState({
    userStatisticData: state => state.app.userStatisticData,
    userData: state => state.app.userData
  }),
  watch: {
    value: {
      handler: function (val) {
        if (val) {
          const [startTime, endTime] = val
          this.dataForm = Object.assign({}, this.dataForm, { startTime, endTime })
        }
        this.updateUserData()
      },
      immediate: false
    },
    'dataForm.sn8': {
      handler: function (val) {
        this.updateUserData()
      }
    }
  },
  created () {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
    this.$set(this.dataForm, 'startTime', start)
    this.$set(this.dataForm, 'endTime', end)
    // console.log(`${start}->${end}`)
    this.value = [start, end]
  },
  methods: {
    async updateUserData () {
      // this.$store.dispatch('app/updateUserData', this.dataForm)
      this.loading = true
      const { data: res } = await this.$http.post(this.getApiUrl(`/midea/menu/analyse/usercounts`, true), this.dataForm)
      this.loading = false
      if (res.code === 200) {
        const labels = this.$i18n.t('appData.user.table.heads')
        const keys = ['addCounts', 'activeCounts', 'totalCounts']
        const buffer = []
        labels.forEach((item, index) => {
          const _item = {
            label: item,
            value: res.data[keys[index]]
          }
          buffer.push(_item)
        })
        this.$store.state.app.userData = buffer
      }
    },
    formatDate (date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },
    async updateUserStatisticData ({ index, dayweekmonth }) {
      const type = index === 0 ? 'add' : 'active'
      const params = Object.assign({}, this.dataForm)
      // const params = Object.assign({}, this.dataForm, { endTime: this.formatDate(this.dataForm.endTime), startTime: this.formatDate(this.dataForm.startTime) })
      params.dayweekmonth = dayweekmonth
      const { data: res } = await this.$http.post(this.getApiUrl(`/midea/menu/analyse/dayweekmonth${type}user`), params)
      if (res.code === 200) {
        const heads = this.$i18n.t('appData.user.table.heads')
        const data = {
          label: index === 0 ? heads[0] : heads[1],
          value: res.data
        }
        const buffer = this.$store.state.app.userStatisticData
        buffer[index] = data
        this.$store.state.app.userStatisticData = buffer.concat()
      }
    }
  }
}
</script>
